<template>
  <div v-if="showGraphic">
    <svg :viewBox="graphic.viewBox" class="image-root">
      <polygon id="ACC" :points="graphic.boundary" class="boundary" />
      <polygon id="TMA" :points="graphic.coverage" class="coverage" />
      <polygon
        v-for="(value, key) in graphic.sectors"
        :id="key"
        :points="value"
        class="sector"
        :style="{ fill: colorMap[key] }"
      />
      <g v-for="seat in dataMap">
        <g
          v-if="seat"
          :transform="`translate(${seat.center.x} ${seat.center.y})`"
          class="text-group"
        >
          <text transform="translate(-30 -45)" class="text text-big">
            {{ seat.seatName }}
          </text>
          <text
            :transform="`translate(${(seat.frequency + '').length * -3.5} 0)`"
            class="text text-medium"
          >
            {{ seat.frequency }}
          </text>
          <text
            :transform="`translate(${seat.sectorCodes.length * -18 + 4.5} 35)`"
            class="text text-small"
          >
            {{ seat.sectorCodes.join("  ") }}
          </text>
          <!-- <text transform="translate(-30 24)" class="text text-small">
              {{ seat.sectorCodes.join("  ") }}
            </text> -->
        </g>
      </g>
    </svg>
    <!-- <pre>{{ dataMap }}</pre> -->
    <!-- <pre>{{ colorMap }}</pre> -->
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";
import dayjs from "dayjs";
import graphicLite from "./graphic.json";
import graphicFull from "./graphic.full.json";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

// const strokeColor = computed(() => (commonStore.darkMode ? "#fff" : "#000"));
// const coverageColor = computed(() => (commonStore.darkMode ? "#000" : "#fff"));

const showGraphic = ref(true);
const showAll = ref(false);
const setShowAll = async (val) => {
  console.log("setShowAll", val);
  showGraphic.value = false;
  showAll.value = val;
  showGraphic.value = true;
  await nextTick();
};
defineExpose({ setShowAll });

const graphic = computed(() => (showAll.value ? graphicFull : graphicLite));

const dataMap = computed(() =>
  seatStore.seatStatus
    .filter(
      (seat) =>
        seat.orgGroup == "ACC" && seat.sectorYes && seat.sectorCodes.length > 0
    )
    .map((seat) => {
      // users
      let seatUsers = seat.users.map((user) => {
        return {
          code: user.code,
          name: user.name,
          post: user.post,
          role: user.role,
        };
      });

      // transfer gates
      // let gates = new Array();
      // seat.sectorCodes.forEach((code) =>{});

      // center point
      let pointsArray = Object.keys(graphic.value.sectors)
        .filter((code) => seat.sectorCodes.includes(code))
        .map((code) => graphic.value.sectors[code]);
      // center
      let x = 0;
      let y = 0;
      let count = 0;
      pointsArray.forEach((points) => {
        points.split(" ").forEach((point, index) => {
          if (index % 2 === 0) {
            x += parseFloat(point);
            count++;
          } else {
            y += parseFloat(point);
          }
        });
      });
      if (count !== 0) {
        let textCenter = { x: x / count, y: y / count };
        return {
          seatName: seat.seatName,
          sectorCodes: seat.sectorCodes,
          logicSectorCode: seat.logicSectorCode,
          users: seatUsers,
          frequency: seat.frequency,
          defaultFrequency: seat.defaultFrequency,
          defaultColor: seat.defaultColor,
          color: seat.color,
          center: textCenter,
          // gates,
        };
      }
    })
);

const colorMap = computed(() => {
  let colors = {};
  dataMap.value.forEach((cell) => {
    if (cell) {
      cell.sectorCodes.forEach((code) => {
        colors[code] = commonStore.darkMode ? cell.defaultColor : cell.color;
      });
    }
  });
  return colors;
});
</script>

<style scoped>
.image-root {
  transform: scale(1.01) translateY(10px);
  transition: all 0.5s ease-out;
}

.image-root:hover {
  transform: scale(1.03) translateY(10px);
}
.sector {
  stroke: var(--el-text-color-primary);
  stroke-width: 3px;
  opacity: 0.6;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.sector:hover {
  opacity: 0.85;
}

.coverage {
  fill: var(--el-bg-color-overlay);
  stroke: var(--el-text-color-primary);
  stroke-width: 3px;
  cursor: pointer;
  stroke-dasharray: 5, 5;
}

.boundary {
  fill: var(--el-bg-color-overlay);
  stroke: var(--el-text-color-primary);
  stroke-width: 3px;
  cursor: pointer;
}

.text-group {
  fill: var(--el-text-color-primary);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  text-shadow: 0 0 10px var(--el-bg-color-overlay),
    0 0 3px var(--el-bg-color-overlay);
}

.text-group:hover {
  text-shadow: 0 0 100px var(--el-bg-color-overlay),
    0 0 3px var(--el-bg-color-overlay);
}

.text {
  font-weight: 900;
  font-family: Consolas, "Courier New", Courier, monospace;
  transition: all 0.5s ease-in-out;
}

.text-big {
  font-size: 60px;
}
.text-medium {
  font-size: 45px;
}
.text-small {
  font-size: 30px;
}
</style>
